<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./libs/layui/css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/list.css">

    <body>
        <div class="container">
            <!-- top -->
            <div class="top"></div>
            <!-- 搜索 -->
            <div class="headSearchBox"></div>
            <!-- 导航 -->
            <div class="headNavBox">
                <div class="main headNav flex-c-between">
                    <ul class="nav flex-c-around">
                        <li><a href="./index.html" class="activeNav">首页</a></li>
                        <li><a>海外直购</a></li>
                        <li><a>考拉自有品牌</a></li>
                        <li><a>品质奶粉</a></li>
                        <li><a>人气面膜</a></li>
                        <li><a>充值</a></li>
                    </ul>
                    <div class="seconAndMenu">
                        <div class="headMenu">
                            <div class="category"><i>1</i>所有分类</div>
                            <ul class="categoryList">
                                <li><a href="#"><i>1</i>美容彩妆</a></li>
                                <li><a href="#"><i>1</i>母婴儿童</a></li>
                                <li><a href="#"><i>1</i>营养保健</a></li>
                                <li><a href="#"><i>1</i>数码家电</a></li>
                                <li><a href="#"><i>1</i>个护家清</a></li>
                                <li><a href="#"><i>1</i>服饰鞋靴</a></li>
                                <li><a href="#"><i>1</i>户外运动</a></li>
                                <li><a href="#"><i>1</i>手表配饰</a></li>
                                <li><a href="#"><i>1</i>轻奢</a></li>
                                <li><a href="#"><i>1</i>家居生活</a></li>
                                <li><a href="#"><i>1</i>环球美食</a></li>
                                <li><a href="#"><i>1</i>宠物生活</a></li>
                            </ul>
                        </div>
                        <div class="secondMenuBox">
                            <div class="secondMenuLeft">
                                <ul class="secondMenu">
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>宠物主粮</h4>
                                            <div class="secondItemAs">
                                                <a href="#">湿粮罐头</a>
                                                <a href="#">狗粮</a>
                                                <a href="#">猫粮</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>零食罐头</h4>
                                            <div class="secondItemAs">
                                                <a href="#">狗零食</a>
                                                <a href="#">猫零食</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>宠物医疗保健</h4>
                                            <div class="secondItemAs">
                                                <a href="#">猫/狗药品</a>
                                                <a href="#">猫/狗保健品</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>猫砂类产品</h4>
                                            <div class="secondItemAs">
                                                <a href="#">其他猫砂类产品</a>
                                                <a href="#">猫砂</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>宠物洗护美容</h4>
                                            <div class="secondItemAs">
                                                <a href="#">口腔清洁</a>
                                                <a href="#">浴液</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>宠物玩具</h4>
                                            <div class="secondItemAs">
                                                <a href="#">宠物玩具</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="secondMenu">
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>护肤</h4>
                                            <div class="secondItemAs">
                                                <a href="#">洁面</a>
                                                <a href="#">卸妆</a>
                                                <a href="#">爽肤水</a>
                                                <a href="#">面霜</a>
                                                <a href="#">眼部护理</a>
                                                <a href="#">精华</a>
                                                <a href="#">乳液/凝胶</a>
                                                <a href="#">唇部护理</a>
                                                <a href="#">护肤套装</a>
                                                <a href="#">精油芳疗</a>
                                                <a href="#">面部护肤</a>
                                                <a href="#">防晒修复</a>
                                                <a href="#">男士护肤</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="secondMenuItemBox">
                                            <h4>面膜</h4>
                                            <div class="secondItemAs">
                                                <a href="#">美迪惠尔</a>
                                                <a href="#">JMsolution</a>
                                                <a href="#">RAY</a>
                                                <a href="#">Dr.Jart+ </a>
                                                <a href="#">JAYJUN</a>
                                                <a href="#">春雨</a>
                                                <a href="#">香蒲丽</a>
                                                <a href="#">森田药妆</a>
                                                <a href="#">肌美精</a>
                                                <a href="#">丽得姿</a>
                                                <a href="#">其他面膜</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="secondMenuRight">
                                111
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主体内容 -->
            <div class="searchResultBox">
                <div class="main searchResult">
                    <div class="searchTop">
                        <div class="searchNav">
                            <a href="#">全部結果</a> &gt;
                            <a href="#">办公/外设</a> &gt;
                            <a href="#">电脑/平板电脑</a> &gt;
                            <div class="detailSearch">
                                <input class="currentSearchInput" type="text" placeholder="在当前条件下搜索">
                                <i>111</i>
                            </div>
                            <span>
                            商品共<b class="currentResult">9</b>个
                        </span>
                        </div>
                        <div class="searchConBox">
                            <div class="searchConRow">
                                <div class="searchRownName">
                                    <span><i>1</i>分类</span>
                                </div>
                                <div class="searchRowBrand flex">
                                    <a title="笔记本电脑" href="#">笔记本电脑</a>
                                    <a title="平板电脑" href="#">平板电脑</a>
                                    <a title="电脑/电脑周边" href="#">电脑/电脑周边</a>
                                    <a title="数码家电" href="#">数码家电</a>
                                    <a title="3C数码" href="#">3C数码</a>
                                </div>
                            </div>
                            <div class="searchConRow">
                                <div class="searchRownName">
                                    <span>屏幕尺寸</span>
                                </div>
                                <div class="searchRowBrand flex">
                                    <a title="10.1-15英寸" href="#">10.1-15英寸</a>
                                    <a title="15.1-20英寸" href="#">15.1-20英寸</a>
                                </div>
                            </div>
                            <div class="searchConRow">
                                <div class="searchRownName">
                                    <span>显卡</span>
                                </div>
                                <div class="searchRowBrand flex">
                                    <a title="独立显卡" href="#">独立显卡</a>
                                    <a title="集成显卡" href="#">集成显卡</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="searchFilter flex-c-between">
                        <div class="filterConditions flex-c-between" id="filterList">
                            <a class="saleConditionBtn filterItem conditionActive">综合</a>
                            <a class="saleVolume filterItem ">销量<i class="saleNumberUp">111</i><i
                                class="saleNumberDown">222</i></a>
                            <a class="newProBtn filterItem ">新品</a>
                            <a class="changePriceBtn filterItem ">价格<i class="salePriceUp">111</i><i
                                class="salePriceDown">222</i></a>
                            <div class="filterRight flex-c-between">
                                <div class="filterPriceBox">
                                    <div class="filterPricePos">
                                        <div class="filterPrice flex-c-between">
                                            <input class="filterMinPrice" placeholder="&yen;" type="number">
                                            <span>&nbsp;-&nbsp;</span>
                                            <input class="filterMaxPrice" placeholder="&yen;" type="number">
                                        </div>
                                        <div class="filterConfirm flex-c-between">
                                            <button class="filterPriceSure">清空</button>
                                            <button class="filterPriceClear">确定</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="filterAddrBox">
                                    收货地址
                                    <select name="" id="">
                                    <option value="">浙江/杭州市/上城区</option>
                                </select>
                                    <!-- <div class="choseAddrBox">
                                    <ul>
                                        <li>
                                            <label for="">华北：</label>
                                            <span>北京</span>
                                            <span>天津</span>
                                            <span>河北</span>
                                            <span>山西</span>
                                            <span>内蒙</span>
                                        </li>
                                    </ul>
                                </div> -->
                                    <div class="filterSelfBox flex-c-between">
                                        <input type="checkbox" class="filterSelf filterItem" name="" id="filterSelf">
                                        <label for="filterSelf">考拉自营</label>
                                    </div>
                                    <div class="filterHasBox flex-c-between">
                                        <input type="checkbox" class="filterHas filterItem" name="" id="filterHas">
                                        <label for="filterHas">仅看有货</label>
                                    </div>
                                    <div class="filterSeleBox flex-c-between">
                                        <input type="checkbox" class="filterSele filterItem" name="" id="filterSele">
                                        <label for="filterSele">促销</label>
                                    </div>
                                    <div class="filterMakeBox flex-c-between">
                                        <input type="checkbox" class="filterMake filterItem" name="" id="filterMake">
                                        <label for="filterMake">考拉出品</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="paganation">
                            <span class="curPage">1</span>/
                            <span class="totalPage">1</span>
                            <i class="preBtn">&lt;</i>
                            <i class="nextBtn">&gt;</i>
                        </div>
                    </div>
                    <div class="searchResult flex" id="goodsList">
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                <span>自营</span>
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                        <div class="goods">
                            <img src="./images/./goods01.jpg" alt="">
                            <h2>&yen;<span>6799</span></h2>
                            <p class="titleInfo">
                                考拉工厂店 联想2021款小新Air14/14寸锐龙5000处理器正版office笔记本电脑
                            </p>
                            <p class="saleInfo">
                                自营
                            </p>
                            <p class="goodsInfo">
                                <a href="#">
                                    <i>111</i>
                                    <span>0</span>
                                </a>
                                <span>中国</span>
                            </p>
                            <p class="selfInfo">
                                考拉海购自营
                            </p>
                        </div>
                    </div>
                    <div class="goodsLikeBox">
                        <h3>猜你喜欢 <span>根据你的浏览记录推荐的商品</span></h3>
                        <div class="goodsLikeCon">
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="goodsBuyBox">
                        <h3>大家都在买<span>全网最热门的商品推荐</span></h3>
                        <div class="goodsLikeCon">
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="goodsViewBox">
                        <h3>最近浏览<span>你最近一段时间浏览的商品</span></h3>
                        <div class="goodsLikeCon">
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                            <div class="goodsLike">
                                <img src="./images/goodsLike01.jpg" alt="">
                                <p class="goodsLikeInfo">
                                    2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼
                                </p>
                                <div class="goodsLikePrice">
                                    <i>&yen;</i><span>2699</span>
                                </div>
                                <p class="goodsLikeComment">
                                    <span class="goodsLikeCommentNum">0</span> 人已评价
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下部 -->
            <div class="bottomBox"></div>
            <!-- 关于我们 -->
            <div class="aboutUsBox"></div>
            <!-- 底部 -->
            <div class="footer"></div>
        </div>
    </body>
    <!-- <script src="./libs/require.js"></script> -->
    <script src="./libs/jquery.js"></script>
    <script src="./js/list.js"></script>
    <script src="./libs/layui/layui.js"></script>
    <script>
        layui.use('carousel', function() {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#goodsList',
                width: '100%', //设置容器宽度
                height: 'auto',
                arrow: 'hover', //始终显示箭头
                anim: 'fade' //切换动画方式
            });
        });
    </script>

</html>